<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<u-navbar back-text="返回">
			<view class="u-p-l-20 u-p-r-20 u-flex-1">
				<u-search action-text=""
					placeholder="请输入搜索内容" 
					border-color="#5CB61A"
					bg-color="#fff"
					@custom="back" 
					@search="search" 
					:show-action="false"
					v-model="keyword"></u-search>
			</view>
		</u-navbar>
		<view class="u-page">
			<view class="history">
				<view class="title">搜索历史</view>
				<view class="list">
					<block v-for="(item,index) in searchList">
						<u-button  @click="historySearch(index)" size="mini" hover-class="none" :custom-style="{margin:'20rpx 20rpx 0 0'}">{{item}}</u-button>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				keyword: '',
				searchList: []
			}
		},
		onLoad(options) {
			let search_history = uni.getStorageSync('search_history');
			if(search_history != '')
				this.searchList = search_history.split(',')
		},
		onShow() {
			this.getCartNum = 1;
		},
		onHide() {
			this.getCartNum = 0;
		},
		onReady() {},
		methods: {
			back(){
				uni.navigateBack()
			},
			search(keyword){
				this.saveHistory(keyword);
				uni.navigateTo({
					url: '/pages/shop/goods/searchList?keyword='+keyword
				})
			},
			historySearch(index){
				this.search(this.searchList[index])
			},
			saveHistory(value){
				let that = this;
				let index = that.searchList.indexOf(value)
				if(index != -1){
					that.searchList.splice(index, 1)
				}
				that.searchList.unshift(value)
				if(that.searchList.length > 10){
					that.searchList = that.searchList.splice(0, 9);
				}
				uni.setStorage({
					key: 'search_history',
					data: that.searchList.join(',')
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-body {
		height: 100%;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	
	.search_box{
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.history{
		padding: 20rpx 30rpx;
		
		.title{
			font-size: 32rpx;
		}
		.list{
			padding: 20rpx 0;
		}
	}
	
</style>
